<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --feedback-bg-color: #f8f9fa;
            --feedback-card-bg: #ffffff;
            --feedback-text-primary: #212529;
            --feedback-text-secondary: #6c757d;
            --feedback-border-color: #dee2e6;
            --feedback-soft-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            --feedback-radius-lg: 16px;
            --feedback-radius-md: 12px;
            --feedback-radius-sm: 8px;
            --feedback-primary-color: #4a6fee;
            --feedback-success-color: #28a745;
            --feedback-warning-color: #ffc107;
            --feedback-danger-color: #dc3545;
        }
        
        body {
            background-color: var(--feedback-bg-color);
        }
        
        .app-container {
            max-width: var(--content-max-width, 450px);
            background-color: var(--feedback-bg-color);
            box-shadow: none;
        }
        
        /* 头部样式 */
        .feedback-header {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: var(--content-max-width, 450px);
            background-color: white;
            display: flex;
            align-items: center;
            padding: 15px;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .back-btn {
            background: none;
            border: none;
            font-size: 22px;
            color: var(--feedback-text-primary);
            cursor: pointer;
            padding: 0;
            margin-right: 15px;
        }
        
        .feedback-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        /* 内容区域样式 */
        .feedback-content {
            padding: 15px;
            margin-top: 60px;
            padding-bottom: 70px; /* 为底部导航栏预留空间 */
        }
        
        .feedback-card {
            background-color: var(--feedback-card-bg);
            border-radius: var(--feedback-radius-md);
            box-shadow: var(--feedback-soft-shadow);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .feedback-intro {
            color: var(--feedback-text-secondary);
            font-size: 14px;
            margin: 0 0 20px;
            line-height: 1.5;
        }
        
        .feedback-form .form-group {
            margin-bottom: 20px;
        }
        
        .feedback-form label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--feedback-text-primary);
            margin-bottom: 8px;
        }
        
        .feedback-form label.required::after {
            content: '*';
            color: var(--feedback-danger-color);
            margin-left: 4px;
        }
        
        .feedback-form input, 
        .feedback-form select, 
        .feedback-form textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--feedback-border-color);
            border-radius: var(--feedback-radius-sm);
            font-size: 14px;
            color: var(--feedback-text-primary);
            background-color: #fff;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .feedback-form input:focus, 
        .feedback-form select:focus, 
        .feedback-form textarea:focus {
            border-color: var(--feedback-primary-color);
            box-shadow: 0 0 0 3px rgba(74, 111, 238, 0.1);
            outline: none;
        }
        
        .feedback-form textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .feedback-form .char-count {
            color: var(--feedback-text-secondary);
            font-size: 12px;
            text-align: right;
            margin-top: 4px;
        }
        
        .feedback-form .upload-area {
            border: 2px dashed var(--feedback-border-color);
            border-radius: var(--feedback-radius-sm);
            padding: 20px;
            text-align: center;
            margin-bottom: 10px;
            background-color: #fafafa;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .feedback-form .upload-area:hover {
            border-color: var(--feedback-primary-color);
            background-color: #f0f6ff;
        }
        
        .feedback-form .upload-icon {
            font-size: 30px;
            color: var(--feedback-primary-color);
            margin-bottom: 10px;
        }
        
        .feedback-form .upload-text {
            font-size: 14px;
            color: var(--feedback-text-secondary);
            margin: 0;
        }
        
        .feedback-form .upload-text strong {
            color: var(--feedback-primary-color);
        }
        
        .feedback-form .upload-hint {
            font-size: 12px;
            color: var(--feedback-text-secondary);
            margin-top: 5px;
        }
        
        .feedback-form .file-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        
        .preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .preview-item {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: var(--feedback-radius-sm);
            overflow: hidden;
            background-color: #f0f0f0;
            border: 1px solid var(--feedback-border-color);
        }
        
        .preview-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .remove-preview {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            z-index: 1;
        }
        
        .category-selection {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .category-chip {
            display: inline-block;
            padding: 8px 15px;
            background-color: #f0f0f0;
            border: 1px solid var(--feedback-border-color);
            border-radius: 20px;
            font-size: 14px;
            color: var(--feedback-text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .category-chip.active {
            background-color: var(--feedback-primary-color);
            color: white;
            border-color: var(--feedback-primary-color);
        }
        
        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: var(--feedback-primary-color);
            color: white;
            border: none;
            border-radius: var(--feedback-radius-sm);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(74, 111, 238, 0.25);
        }
        
        .submit-btn:hover {
            background-color: #3a5bd9;
            box-shadow: 0 5px 12px rgba(74, 111, 238, 0.35);
        }
        
        .submit-btn:disabled {
            background-color: #9eb1f8;
            cursor: not-allowed;
            box-shadow: none;
        }
        
        /* 联系方式卡片 */
        .contact-info {
            background-color: var(--feedback-card-bg);
            border-radius: var(--feedback-radius-md);
            box-shadow: var(--feedback-soft-shadow);
            padding: 15px;
        }
        
        .contact-info-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--feedback-text-primary);
            margin: 0 0 10px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .contact-item:last-child {
            margin-bottom: 0;
        }
        
        .contact-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #f0f6ff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--feedback-primary-color);
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .contact-text {
            font-size: 14px;
            color: var(--feedback-text-primary);
            line-height: 1.4;
        }
        
        .contact-text a {
            color: var(--feedback-primary-color);
            text-decoration: none;
        }
        
        /* 成功提交状态 */
        .feedback-success {
            text-align: center;
            padding: 30px 20px;
        }
        
        .success-icon {
            font-size: 60px;
            color: var(--feedback-success-color);
            margin-bottom: 15px;
        }
        
        .success-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--feedback-text-primary);
            margin: 0 0 10px;
        }
        
        .success-message {
            font-size: 14px;
            color: var(--feedback-text-secondary);
            margin: 0 0 25px;
            line-height: 1.5;
        }
        
        .back-home-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--feedback-primary-color);
            color: white;
            border-radius: 20px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 3px 8px rgba(74, 111, 238, 0.25);
            transition: all 0.3s ease;
        }
        
        .back-home-btn:hover {
            background-color: #3a5bd9;
            box-shadow: 0 5px 12px rgba(74, 111, 238, 0.35);
        }
        
        /* 底部导航栏样式（复用profile.html样式） */
        .tab-bar {
            height: 50px; 
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 450px;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
            border-top: 1px solid #eee;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            opacity: 1;
            transition: all 0.3s ease;
            padding-bottom: env(safe-area-inset-bottom, 0); 
        }
        
        .tab-bar .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            color: #8e8e93;
            font-size: 10px;
            position: relative;
            text-decoration: none;
            padding: 0;
        }
        
        .tab-bar .tab-item.active {
            color: #4a6fee;
        }
        
        .tab-bar .tab-item i {
            font-size: 20px;
            margin-bottom: 2px;
            transition: all 0.3s ease;
        }
        
        .tab-bar .tab-item span {
            font-size: 10px;
            line-height: 1;
            transition: all 0.3s ease;
        }
        
        .tab-bar .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 2px;
            border-radius: 1px;
            background-color: #4a6fee;
        }
        
        /* 针对iPhoneX等全面屏设备的安全区适配 */
        @supports (padding-bottom: constant(safe-area-inset-bottom)) {
            .tab-bar {
                padding-bottom: constant(safe-area-inset-bottom);
            }
            .feedback-content {
                padding-bottom: calc(50px + constant(safe-area-inset-bottom));
            }
        }
        
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .tab-bar {
                padding-bottom: env(safe-area-inset-bottom);
            }
            .feedback-content {
                padding-bottom: calc(50px + env(safe-area-inset-bottom));
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="feedback-header">
            <button class="back-btn" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="feedback-title">意见反馈</h1>
        </header>

        <!-- 主内容区 -->
        <main class="feedback-content">
            <div class="feedback-card">
                <p class="feedback-intro">感谢您对我们产品的关注和使用！您的反馈对我们非常重要，我们将认真对待每一条宝贵意见，不断优化产品体验。</p>
                
                <form class="feedback-form" id="feedbackForm">
                    <!-- 反馈类型选择 -->
                    <div class="form-group">
                        <label class="required">反馈类型</label>
                        <div class="category-selection">
                            <div class="category-chip active" data-value="功能建议">功能建议</div>
                            <div class="category-chip" data-value="产品体验">产品体验</div>
                            <div class="category-chip" data-value="内容相关">内容相关</div>
                            <div class="category-chip" data-value="操作问题">操作问题</div>
                            <div class="category-chip" data-value="其他">其他</div>
                        </div>
                        <input type="hidden" name="feedbackType" id="feedbackType" value="功能建议">
                    </div>
                    
                    <!-- 反馈内容 -->
                    <div class="form-group">
                        <label for="feedbackContent" class="required">反馈内容</label>
                        <textarea id="feedbackContent" name="feedbackContent" placeholder="请详细描述您遇到的问题或建议，有助于我们更好地理解和处理..." maxlength="500" required></textarea>
                        <div class="char-count"><span id="currentCount">0</span>/500</div>
                    </div>
                    
                    <!-- 图片上传 -->
                    <div class="form-group">
                        <label>上传图片（选填）</label>
                        <div class="upload-area" id="uploadArea">
                            <i class="bi bi-images upload-icon"></i>
                            <p class="upload-text">点击上传或<strong>拖拽</strong>图片至此</p>
                            <p class="upload-hint">最多上传3张，支持JPG、PNG格式</p>
                            <input type="file" class="file-input" id="imageUpload" accept="image/jpeg, image/png" multiple>
                        </div>
                        <div class="preview-container" id="previewContainer"></div>
                    </div>
                    
                    <!-- 联系方式 -->
                    <div class="form-group">
                        <label for="contactInfo">联系方式（选填）</label>
                        <input type="text" id="contactInfo" name="contactInfo" placeholder="手机号/邮箱/微信，方便我们与您取得联系">
                    </div>
                    
                    <!-- 提交按钮 -->
                    <button type="submit" class="submit-btn" id="submitBtn">提交反馈</button>
                </form>
            </div>
            
            <!-- 联系我们卡片 -->
            <div class="contact-info">
                <h3 class="contact-info-title">其他联系方式</h3>
                
                <div class="contact-item">
                    <div class="contact-icon">
                        <i class="bi bi-headset"></i>
                    </div>
                    <div class="contact-text">
                        <strong>客服热线：</strong>400-123-4567<br>
                        <small>服务时间：工作日 9:00-18:00</small>
                    </div>
                </div>
                
                <div class="contact-item">
                    <div class="contact-icon">
                        <i class="bi bi-envelope"></i>
                    </div>
                    <div class="contact-text">
                        <strong>邮箱：</strong><a href="mailto:feedback@example.com">feedback@example.com</a>
                    </div>
                </div>
                
                <div class="contact-item">
                    <div class="contact-icon">
                        <i class="bi bi-chat-dots"></i>
                    </div>
                    <div class="contact-text">
                        <strong>官方微信：</strong>JobMatchPro<br>
                        <small>扫描二维码添加，回复"反馈"提交意见</small>
                    </div>
                </div>
            </div>
            
            <!-- 成功提交状态 (初始隐藏) -->
            <div class="feedback-card feedback-success" id="successCard" style="display: none;">
                <i class="bi bi-check-circle-fill success-icon"></i>
                <h3 class="success-title">提交成功</h3>
                <p class="success-message">感谢您的反馈！我们已收到您的意见，将尽快处理并回复。</p>
                <a href="../index.html" class="back-home-btn">返回首页</a>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </a>
            <a href="agents.html" class="tab-item">
                <i class="bi bi-person-rolodex"></i>
                <span>经纪人</span>
            </a>
            <a href="profile.html" class="tab-item active">
                <i class="bi bi-person-fill"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 表单元素
            const feedbackForm = document.getElementById('feedbackForm');
            const feedbackContent = document.getElementById('feedbackContent');
            const currentCount = document.getElementById('currentCount');
            const submitBtn = document.getElementById('submitBtn');
            const categoryChips = document.querySelectorAll('.category-chip');
            const feedbackTypeInput = document.getElementById('feedbackType');
            const imageUpload = document.getElementById('imageUpload');
            const previewContainer = document.getElementById('previewContainer');
            const successCard = document.getElementById('successCard');
            
            // 字数统计功能
            feedbackContent.addEventListener('input', function() {
                const count = this.value.length;
                currentCount.textContent = count;
                
                // 接近字数限制时添加视觉提示
                if (count > 450) {
                    currentCount.style.color = '#dc3545';
                } else {
                    currentCount.style.color = '';
                }
            });
            
            // 反馈类型选择
            categoryChips.forEach(chip => {
                chip.addEventListener('click', function() {
                    // 移除所有活跃状态
                    categoryChips.forEach(c => c.classList.remove('active'));
                    // 添加当前活跃状态
                    this.classList.add('active');
                    // 更新隐藏输入值
                    feedbackTypeInput.value = this.dataset.value;
                });
            });
            
            // 图片上传预览
            let uploadedFiles = [];
            
            imageUpload.addEventListener('change', function() {
                handleFiles(this.files);
            });
            
            // 拖放文件上传
            const uploadArea = document.getElementById('uploadArea');
            
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.borderColor = '#4a6fee';
                this.style.backgroundColor = '#f0f6ff';
            });
            
            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.style.borderColor = '';
                this.style.backgroundColor = '';
            });
            
            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.borderColor = '';
                this.style.backgroundColor = '';
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    handleFiles(files);
                }
            });
            
            // 处理选择的文件
            function handleFiles(files) {
                // 检查文件类型和数量限制
                const imageFiles = Array.from(files).filter(file => 
                    file.type === 'image/jpeg' || file.type === 'image/png'
                );
                
                // 限制最多上传3张图片
                const totalFiles = uploadedFiles.length + imageFiles.length;
                if (totalFiles > 3) {
                    alert('最多只能上传3张图片');
                    return;
                }
                
                // 处理每个文件
                imageFiles.forEach(file => {
                    uploadedFiles.push(file);
                    
                    // 创建预览元素
                    const previewItem = document.createElement('div');
                    previewItem.className = 'preview-item';
                    
                    // 创建删除按钮
                    const removeBtn = document.createElement('div');
                    removeBtn.className = 'remove-preview';
                    removeBtn.innerHTML = '<i class="bi bi-x"></i>';
                    removeBtn.addEventListener('click', function() {
                        // 从数组中移除文件
                        const index = uploadedFiles.indexOf(file);
                        if (index > -1) {
                            uploadedFiles.splice(index, 1);
                        }
                        // 移除预览元素
                        previewItem.remove();
                    });
                    
                    // 创建图片预览
                    const img = document.createElement('img');
                    img.className = 'preview-img';
                    
                    // 读取文件并设置预览
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        img.src = e.target.result;
                    }
                    reader.readAsDataURL(file);
                    
                    // 组装预览元素
                    previewItem.appendChild(img);
                    previewItem.appendChild(removeBtn);
                    previewContainer.appendChild(previewItem);
                });
                
                // 如果达到最大数量，禁用上传区域
                if (uploadedFiles.length >= 3) {
                    uploadArea.style.opacity = '0.5';
                    uploadArea.style.pointerEvents = 'none';
                }
            }
            
            // 表单提交
            feedbackForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 简单表单验证
                if (!feedbackContent.value.trim()) {
                    alert('请填写反馈内容');
                    feedbackContent.focus();
                    return;
                }
                
                // 禁用提交按钮，防止重复提交
                submitBtn.disabled = true;
                submitBtn.textContent = '提交中...';
                
                // 模拟提交过程
                setTimeout(function() {
                    // 隐藏表单，显示成功状态
                    feedbackForm.parentElement.style.display = 'none';
                    successCard.style.display = 'block';
                    
                    // 可以在此处添加真实的表单提交代码
                    // const formData = new FormData(feedbackForm);
                    // 添加上传的图片文件
                    // uploadedFiles.forEach((file, index) => {
                    //     formData.append('image' + (index + 1), file);
                    // });
                    
                    // fetch('/api/feedback', {
                    //     method: 'POST',
                    //     body: formData
                    // })
                    // .then(response => response.json())
                    // .then(data => {
                    //     console.log('Success:', data);
                    //     // 显示成功消息
                    //     feedbackForm.parentElement.style.display = 'none';
                    //     successCard.style.display = 'block';
                    // })
                    // .catch(error => {
                    //     console.error('Error:', error);
                    //     // 显示错误消息
                    //     submitBtn.disabled = false;
                    //     submitBtn.textContent = '提交反馈';
                    //     alert('提交失败，请稍后重试');
                    // });
                    
                }, 1500);
            });
        });
    </script>
</body>
</html> 